<!-- 3D柱状图 -->
<template>
    <div class="bar-wrap">
      <Echarts :data="data" />
    </div>
  </template>
  
  <script setup>
  import Echarts from "./echarts.vue";
  import { computed } from "vue";
  const props = defineProps({
  //位置
    grid: {
      type: Object,
      default: () => ({
        left: "5%",
        right: "5%",
        bottom: "10%",
        top: "15%",
      }),
    },
    //图例
      legend:{
      type: Object,
      default: () => {},
    },
    //数据
    series: {
      type: Object,
      default: () => {},
    },
    //x轴配置
    xAxis: {
      type: Array,
      default: () => {},
    },
   //y轴配置
    yAxis: {
      type: Object,
      default: () => {},
    },
    //单位
    unit: {
      type: String,
      default: "",
    },
    //上下圆面颜色
    pictorialBarColor: {
      type: Array,
      default: () => ["#21F3FF", "rgba(31,97,234,0.4)"],
    },
  });
  
  //echarts配置
  const data = computed(() => {
    let { name, data } = props.series;
    //series配置处理
    let seriesData = [
      //中间柱状图
      {
        type: "bar",
        barWidth: 20, //柱子宽度
        itemStyle: {
          //柱子样式
          color: {
            //渐变颜色
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#00B7FF" },
              { offset: 1, color: "rgba(34,68,172,0.3)" },
            ],
          },
        },
        ...props.series,
      },
      //顶部圆面
      {
        type: "pictorialBar",
        symbolSize: [20, 12],
        symbolOffset: [0, -8],
        symbolPosition:'end',
        z: 12,
        itemStyle: {
          color: props.pictorialBarColor[0],
        },
        name,
        data: data.map((item) => {
          return {
            value: item,
            itemStyle: {
              opacity: item > 0 ? 1 : 0, //值为0时隐藏
            },
          };
        }),
      },
      //底部圆面
      {
        type: "pictorialBar",
        symbolSize: [20, 12],
        symbolOffset: [0, 8],
        z: 12,
        itemStyle: {
          color: props.pictorialBarColor[1],
        },
        name,
        data: data.map((item) => {
          return {
            value: item,
            itemStyle: {
              opacity: item > 0 ? 1 : 0,
            },
          };
        }),
      },
    ];
  
    return {
      grid: props.grid,
      tooltip: {},
      legend: {
        show: true,
        right: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
       ...props.legend
      },
      //x轴
      xAxis: {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(0, 176, 255,0.3)",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        // x轴文字
        axisLabel: {
          color: "#2A2E3E",
          fontSize: 14,
          // margin: 15,
        },
        data: props.xAxis,
      },
      //y轴
      yAxis: {
        name: props.unit ? `单位：${props.unit}` : "", //单位文字
        nameTextStyle: {
          //单位样式
          color: "#2A2E3E",
          nameLocation: "start",
          fontSize: 14,
        },
        nameGap: 40, //单位与y轴距离
        type: "value",
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(0, 176, 255, 0.2)",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        //刻度数值样式
        axisLabel: {
          color: "#2A2E3E",
          fontSize: 14,
        },
        ...props.yAxis,
      },
      series: seriesData,
    };
  });
  </script>
  <style scoped lang="scss">
  .bar-wrap {
    width: 100%;
    height: 100%;
  }
  </style>
  
  